<template>
  <view class="box">
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item,index) in goodsInfo.pics" :key="item.pics_id">
        <view class="swiper-item">
          <image :src="item.pics_big" mode="widthFix" @click="clickImg(item,index)"></image>
        </view>
      </swiper-item>
    </swiper>
   <view class="detail">
    <view class="price">
      ￥{{goodsInfo.goods_price}}
    </view>
     <view class="txt">
        <text>{{goodsInfo.goods_name}}</text>
        <view class="collect">
          <uni-icons type="star" size="18"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <view class="small">
        快递:免运费
      </view>
   </view>
   <view class="bigImg">
      <rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
    </view>
  </view>
  <!-- 点击大图 -->
  <!-- <view class="bigPic" v-if="imgDetail.url" @click="onBig">
    <text>{{imgDetail.i}}/{{goodsInfo.pics.length}}</text>
    <image :src="imgDetail.url" mode="widthFix"></image>
  </view> -->
  <!-- 购物车 -->
  <view class="cart">
    <!-- <my-cart></my-cart> -->
    <uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
    				@buttonClick="buttonClick" />
  </view>
</template>

<script>
  import $http from '../../utils/request';
  import { useCartStore } from '@/store/store.js'
  const cartStore = useCartStore()
  export default {
    data() {
      return {
        goodsId: 0,
        goodsInfo: [],
        //图片路径
        imgDetail: {
          url: '',
          i: cartStore.cartNum
        },
        // 购物车数据
        options: [{
        	icon: 'shop',
        	text: '店铺',
        	infoBackgroundColor: '#007aff',
        	infoColor: "#f5f5f5"
        }, {
        	icon: 'cart',
        	text: '购物车',
        	info: 0
        }],
        buttonGroup: [{
        		text: '加入购物车',
        		backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
        		color: '#fff'
        	},
        	{
        		text: '立即购买',
        		backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
        		color: '#fff'
        	}
        ]
      };
    },
    methods: {
      async getGoodsInfo (goods_id) {
        // const id = Number(goods_id)
        const {data} = await uni.$http.get('api/public/v1/goods/detail', {goods_id})
        // console.log(data.message);
        data.message.goods_introduce = data.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
        this.goodsInfo = data.message
        // console.log(this.goodsInfo);
      },
      // 底部购物车逻辑
      // 左边两个图标点击事件
        onClick(e) {
      		if (e.content.text === '购物车') {
            uni.switchTab({
              url: '/pages/cart/cart'
            })
          }
      	},
        // 右边两个按钮提交事件
      	buttonClick(e) {
            // console.log(e.content);
            if (e.content.text === '立即购买') {
            return
            }
            cartStore.addCartInfo({
              id: this.goodsInfo.goods_id,
              name: this.goodsInfo.goods_name,
              price: this.goodsInfo.goods_price,
              count: 1,
              logo: this.goodsInfo.goods_small_logo,
              state: this.goodsInfo.goods_state,
            })
            // 购物车统计数量
            this.options[1].info = cartStore.cartNum
      	}
    },
    onLoad(op) {
      this.goodsId = op.goods_is
      this.getGoodsInfo(op.goods_is)
      // this.options[1].info = cartStore.cartNum2()
    },
    onReady() {
    
      
    }
  }
</script>

<style lang="scss">
  box{
    padding-bottom: 50px;
  }
swiper {
  height: 750rpx;
  image{
    width: 100%;
  }
}
.price{
  margin-bottom: 10px;
  font-size: 18px;
  color: #940000;
}
.detail {
  padding: 10px;
}
.txt {
  display: flex;
  >text {
    flex: 1;
    font-size: 14px;
  }
  .collect {
    width: 60px;
    display: flex;
    font-size: 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #ddd;
  }
}
.small {
  font-size: 12px;
  color: #b2b2b2;
}
.bigPic{
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #000;
  display: flex;
  align-items: center;
  z-index: 999;
  image{
    width: 100%;
  }
  text{
    position: absolute;
    color: #fff;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.cart {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
}
</style>
